<template>
  <panel title="小区PM2.5">
    <div class="pm__container">
      <div class="x-text-box">
        <div class="top">
          <div class="x-text-box__title" v-if="pmDate.title">{{ pmDate.title }}</div>
        </div>
        <div class="center">
           <div class="x-text-box__value" :class="pm25">
            <span class="num" v-animated-number="pmDate.value">{{ pmDate.value }}</span>
            <span class="unit" v-if="pmDate.unit">{{ pmDate.unit }}</span>
          </div>
        </div>
        <div class="bottom">
           <div class="x-text-box__percent" :class="color">
            <i :class="`fa fa-${arrow} icon`"></i>
            <span class="percent" v-animated-number="percent"></span><span>%</span>
          </div>
        </div>
      </div>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'PM',
  data () {
    return {
      pmDate: {},
      color: '',
      arrow: ''
    }
  },
  computed: {
    pm25 () {
      let res = this.$store.getters.pm25NowdayPM25
      if (!res) {
        return
      }
      this.pmDate = {
        title: '今日平均',
        value: res,
        unit: 'ug/m³'
      }
    },
    percent () {
      let pm25HistoryPM25 = this.$store.getters.pm25HistoryPM25
      let pm25NowdayPM25 = this.$store.getters.pm25NowdayPM25
      console.log(((pm25NowdayPM25 - pm25HistoryPM25) / pm25HistoryPM25) * 100)
      let percent = (((pm25NowdayPM25 - pm25HistoryPM25) / pm25HistoryPM25) * 100).toFixed(1)
      if (percent > 0) {
        this.color = 'red'
        this.arrow = 'arrow-up'
      } else {
        this.color = 'green'
        this.arrow = 'arrow-down'
      }
      return Math.abs(percent)
    }
  },
  mounted () {
    this.requestRestfulData()
  },
  methods: {
    requestRestfulData () {
      this.$store.dispatch('updatePM25')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../assets/stylus/common'
.pm__container {
  font-weight: 100;
  height: 25vmin;
  position: relative;
  .x-text-box {
    position: absolute;
    width: 160px;
    left: 50%;
    top: 50%;
    transform: translate(-50px, -50px)
    .top {
      margin-bottom: 4px;
    }
    .center {
      margin-bottom: 8px;
      .num {
        font-size: 42px;
        font-weight: 500;
      }
      .unit {
        font-size: 16px;
      }
    }
  }
  .x-text-box__percent{
    font-size:16px;
  }
  .x-text-box__title{
    font-size: 14px;
  }
}
.red {
  color: red
}
.green {
  color: green
}
</style>
